let component = 'password'

let createUserPwd = () => {
    let div = document.createElement('div')
    div.className = 'setting-pwd'
    let top = document.createElement('div')
    top.className = 'account-top'
    top.innerHTML = '变更密码'

    let bottom = document.createElement('div')
    bottom.className = 'pwd-bottom'
    bottom.innerHTML = `
        <div class='pwd-bottom-list'>
            <span>现在的密码</span>
            <div class='pwd-list-right'>
                <input style="box-sizing: border-box;  padding-left: 8px;margin-left:72px" id="nowpwd" />
                <span><a href='/views/forget/forgetpassword.html'>忘记你的密码了?</a></span>
            </div>
        </div>
        <div class='pwd-bottom-list pwd-bottom-list2' style='margin-top:18px'>
            <span>新的密码</span>
            <div class='pwd-list-right'>
                <input  style="box-sizing: border-box;  padding-left: 8px;" id="newpasswd"/>
            </div>
        </div>
        <div class='pwd-bottom-list pwd-bottom-list2' style='margin-top:26px' >
            <span>在输一次新密码</span>
            <div class='pwd-list-right'>
                <input   style="box-sizing: border-box;margin-left: 43px;padding-left: 8px;" id="checkpasswd" />
            </div>
        </div>
        <div class='pwd-save'>
            <div class='pwd-save-save'>保存</div>
            <div class='pwd-save-set'>删除账号</div>
        
        </div>
    `
    div.appendChild(top)
    div.appendChild(bottom)

    return div

}


let listenerDel = () => {
    $('.pwd-save-set')[0].addEventListener('click', (e) => {
        $('#mask')[0].style.zIndex = 20
        $('#mask')[0].style.display = 'block'

        delAccountDialog()

        $(".cancel").click(function () {

            $('#mask').css('z-index', '-1');
            $('.warn-dialog').css('display', 'none');
        })

        $(".del").click(async function () {

            let email = $('#delemail').val();


            console.log(email)
            if (emailtest(email) == false) {
                Dreamer.warning('请输入正确的邮箱', 2000)
                return false
            }

            console.log(email)

            let params = {

                'mailbox': email
            }

            let res = await ajax("cancel_account", params, 'post')
            if (res.code == 200) {

                $('#mask').css('z-index', '-1');
                $('.warn-dialog').css('display', 'none');
                Dreamer.info('注销成功', 2000);

            } else {

                Dreamer.info('注销失败', 2000);

            }
        })
    })
}

let createUserNotice = () => {
    let notice = document.createElement('div')
    notice.className = 'setting-notice'
    let top = document.createElement('div')
    top.className = 'notice-top'
    top.innerHTML = '通知设定'
    let bottom = document.createElement('div')
    bottom.innerHTML = `
        <div style='padding-left: 42px;margin-top:26px'>电子邮件通知</div>
        <div style='padding-left:42px;margin-top:26px;display: flex;align-items: center;'>
            <i class='iconfont icon-tick' style='color:#797979'></i>
            <div style='margin-left:3px;margin-right:2px'>课程和信息</div>
            <div style='color:#AEAEAE'>新课程，学生来信等</div>
        </div>
        <div style='padding-left:42px;margin-top:26px;display: flex;align-items: center;'>
            <input type='checkbox'/>
            <div style='margin-left:6px;margin-right:2px'>通用提醒</div>
            <div style='color:#B9B9B9 '>待处理请求，评论，付款</div>
        </div>
        <div style='padding-left:42px;margin-top:26px;display: flex;align-items: center;margin-bottom:37px'>
            <i class='iconfont icon-tick' style='color:#797979'></i>
            <div style='margin-left:3px;margin-right:2px'>SMS通知</div>
            <div style='color:#AEAEAE'>学生上课需求，第一节课提醒</div>
        </div>
        <div class='setting-btn'>保存设置</div>
    `
    notice.appendChild(top)
    notice.appendChild(bottom)
    return notice
}


let createClassOrder = () => {
    let order = document.createElement('div')
    order.className = 'setting-order'
    let top = document.createElement('div')
    top.className = 'order-top'
    top.innerHTML = '课程预约设置'
    let bottom = document.createElement('div')
    bottom.innerHTML = `
        <div class='order-top-list1'>
            <div style='color:#707070;width:284px'>学生预约第一节时，您希望提前多久通知您。</div>
            <div style='margin-left:52px'>
                <div>提前通知</div>
                <select id="tip-time">
                    <!--
                     <option value = "1">至少提前1天通知</option>
                     <option value = "2">至少提前2天通知</option>
                    -->
                     <option value = "12">至少提前12小时通知</option>
                     <option value = "6">至少提前6小时通知</option>
                     <option value = "3">至少提前3小时通知</option>
                     <option value = "1">至少提前1小时通知</option>
                </select>
            </div>
        </div>
        <div class='order-top-list2'>
            <div style='color:#707070;width:284px'>学生可以预约未来多少天的课程</div>
            <div style='margin-left:52px'>
                <div>预定窗口</div>
                <select>
                     <option>至少提前2个月通知</option>
                     <option>至少提前1个月通知</option>
                     <option>至少提前3个星期通知</option>
                     <option>至少提前2个星期通知</option>
                </select>
            </div>
        </div>
        <div class='order-btn-save' style="margin-top:20px">保存设置</div>
    `
    order.appendChild(top)
    order.appendChild(bottom)
    return order
}


let userSettingMap = {
    'password': createUserPwd,
    'notice': createUserNotice,
    'order': createClassOrder
    // 'notice': createNotice
}

let clearRight = () => {
    $('.setting-pwd')[0] && $('.setting-pwd')[0].remove()
    $('.setting-notice')[0] && $('.setting-notice')[0].remove()
    $('.setting-order')[0] && $('.setting-order')[0].remove()
}


// 变更密码
let updatepwd = () => {
    $('#forget').click(function () {

        window.location.href = "/views/forget/forgetpassword.html"
    })

    $('.pwd-save-save').click(async function () {

        let n = $("#nowpwd").val();
        let news = $("#newpasswd").val();
        let cnew = $("#checkpasswd").val();


        let params = {
            password: n,
            password1: news
        }

        console.log(n, news, cnew);
        if (news == cnew) {

            let res = await ajax("password_change", params, 'post')

            if (res.code == 200) {

                Dreamer.info('保存成功', 2000);

            } else {

                Dreamer.warning('保存失败', 2000);

            }

        } else {
            Dreamer.warning('两次密码输入不正确', 2000);
        }

    })
}


// 查询设置提醒
let selectTips = async () => {



    let res = await ajax('teacher_notice_query', {}, 'post')


    $('#tip-time option').each(function () {

        console.log($(this).val(), res.data.teachingt)

        if ($(this).val() == res.data.conversiontime) {

            $(this).attr('selected', 'selected')
        }

    })

}

// 设置通知
let setingTips = () => {
    // 设置老师提前通知
    $('.order-btn-save').click(async function () {

        console.log(typeof parseInt($('#tip-time option:selected').val()))

        let params = {
            conversiontime: parseInt($('#tip-time option:selected').val())
        }

        let res = await ajax('update_class_time', params, 'post')


        if (res && res.code == 200) {

            Dreamer.info('设置成功', 2000);

        } else {

            Dreamer.warning('设置失败', 2000);

        }

    })
}


let createUserSetting = () => {
    return new Promise(async (resolve) => {

        let wrap = document.createElement('div')
        wrap.className = 'component-wrap'
        wrap.style.cssText = 'background-color: #EDEFF0;width: 100%;height: 100%;overflow-x:hidden'
        let div = document.createElement('div')
        div.className = 'component-setting'
        let left = document.createElement('div')
        left.className = 'setting-menu'
        left.innerHTML = `
        <div class='menu-active' data-type='password'>密码</div>
        <div data-type='notice'>通知 </div>
        <div data-type='order'>课程预约</div>
    `
        let right = userSettingMap[component]()
        div.appendChild(left)
        div.appendChild(right)
        wrap.appendChild(div)
        $('.body')[0].appendChild(wrap)


        let listener = () => {
            $('.setting-menu')[0].addEventListener('click', (e) => {
                if (e.target.dataset.type) {
                    let type = e.target.dataset.type
                    clearRight()
                    div.appendChild(userSettingMap[type]())
                    selectTips()
                    setingTips()
                    updatepwd()
                    if (type === 'payType') { bindCardListener(); maskListener() }
                    Array.from($(e.target).parent()[0].children).forEach(item => {
                        if (item.dataset.type === type) {
                            item.className = 'menu-active'
                        } else {
                            item.className = ''
                        }
                    })
                    component = type
                }
            })
        }



        listener()
        listenerDel()

        setTimeout(() => {
            $('.component-wrap')[0].style.opacity = 1
            resolve('ok')
        })

    })
}

let delAccountDialog = () => {
    let div = document.createElement('div')
    div.className = 'warn-dialog'
    div.style.zIndex = 21
    div.innerHTML = `
        <div class='warn-text1'>警告</div>
        <div class='warn-text2'>一旦删除账号将无法恢复，请三思。</div>
        <div class='warn-text3'>确定删除请输入邮箱</div>
        <input  type = 'email' id='delemail'  style = "padding-left:8px;box-sizing:border-box;" />
        <div class='warn-btn'>
            <div class='cancel'>取消</div>
            <div class='del'>删除</div>
        </div>
    `
    $('.body')[0].appendChild(div)
}




export default createUserSetting